<template>
	<view>
		<u-popup :show="show" round="24rpx" mode="bottom" :safeAreaInsetBottom="false" z-index="99999">
			<view class="contentBox">
				<view class="popup-title">
					<view>
						<view style="font-family: MFLiHei_Noncommercial, MFLiHei_Noncommercial;">解锁微信</view>
						<view style="font-weight: 400;font-size: 32rpx;color: #323334;">{{userInfo.nickname}}</view>
					</view>
					<view style="display: flex;">
						<image :src="userInfo.avatar" mode="aspectFill" style="width: 128rpx;height: 128rpx;border-radius: 12rpx;border: 2rpx solid #FFFFFF"></image>
						<image @click="$emit('close')" src="/static/img/closed.png" style="width: 32rpx;height: 32rpx;margin-left: 20rpx;margin-top: -20rpx;"></image>
					</view>
				</view>
				<view style="background-color: #fff;border-top-right-radius: 30rpx;border-top-left-radius: 30rpx;padding: 0 40rpx;">
					<view style="height: 80rpx;"></view>
					<view class="wechat-box">
						<image src="/static/previewImage/weixin.png" style="width: 48rpx;height: 48rpx;"></image>
						<text style="flex:1;text-align: center;font-size: 32rpx;font-weight: 500;">{{userWechat||'未添加微信信息'}}</text>
						<text style="font-size: 28rpx;color: #AFAFAF;">复制微信</text>
					</view>
					<view class="tips-box">
						<text>微信不存在？</text>
						<text style="color: rgba(73, 161, 253, 1);">点击举报</text>
					</view>
					<view class="warning-text">
						<u-icon name="info-circle" color="#FF3E3E" size="14" style="margin-right: 12rpx;"></u-icon>
						请勿轻易转账，警惕裸露诈骗、杀猪盘、下载第三方APP，涉嫌色情等违禁内容请点击举报
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "WeChatPopup",
		data() {
			return {};
		},
		props: {
			show: {
				type: Boolean,
				default: false //是否显示
			},
			user_id: {
				type: [Number, String],
				default: null //解锁用户id
			},
			userWechat: {
				type: [Number, String],
				default: null //微信信息
			},
			userInfo:{
				default:()=>{
					return {
						nickname:'',
						avatar:''
					}
				}
			}
		},
		watch: {
			show(val) {
				console.log(val);
			}
		},
		methods: {
			copyWechat() {
				if (!this.userWechat) {
					return this.$Toast('未添加微信信息')
				}
				uni.setClipboardData({
					data: this.userWechat,
					success() {
						this.$Toast('复制成功')
					}
				})
			},
			// getUserHome() {
			// 	this.$Api['user'].getUserHome({
			// 		user_id: this.user_id
			// 	}).then(res => {
			// 		this.userInfo = res.data
			// 	})
			// },
		}
	}
</script>
<style lang="scss">
	.contentBox {
		width: 100vw;
		min-height: 440rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 50%);
		position: relative;

		.popup-close {
			position: absolute;
			right: 0;
			top: -120rpx;
			width: 88rpx;
			height: 88rpx;
		}

		.popup-title {
			padding:40rpx;
			font-weight: 600;
			font-size: 44rpx;
			color: #323334;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}

		.wechat-box {
			width: 560rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #F8F8F8;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
		}

		.tips-box {
			margin-top: 40rpx;
			font-size: 28rpx;
			text-align: center;
		}

		.tips-box1 {
			margin-top: 64rpx;
			font-size: 30rpx;
			color: #606060;
		}

		.button-group {
			margin-top: 100rpx;

			.title {
				display: block;
				color: #ffffff;
				text-decoration: none;
			}

			.button1 {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				width: 600rpx;
				height: 88rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
				border-radius: 44rpx;
			}
		}

		.warning-text {
			display: flex;
			font-size: 28rpx;
			color: #FF3E3E;
			margin-top: 40rpx;
			align-items: start;
			margin-bottom: 80rpx;
		}
	}
</style>